<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=9,IE=10,IE=11"/>
<title>地图截图</title>
<style type="text/css">
    body{
        margin: 0;
        overflow: hidden;
        background: #fff;
    }
    #map{
        position: relative;
        height: 510px;
        border-top:1px solid #3473b7;
        border-bottom:1px solid #3473b7;
    }
   #toolbar {
        position: relative;
        padding-top: 5px;
        padding-bottom: 10px;
    }
</style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src='../libs/SuperMap.Include.js'></script>
<script src='js/MapToImg.js'></script>
<script type="text/javascript">
var featuresOrigin = [];
var map,layer,markerLayer;
var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
smCompanyArr = [
    ["北京超图软件股份有限公司上海分公司",13522414.5106,3662690.3875,"上海市闸北虬江路1000号聚源大厦办公楼1505室"],
    ["北京超图软件股份有限公司广州分公司",12608758.6677,2647887.5456,"广州市体育西路109号高盛大厦9楼G单元"],
    ["北京超图软件股份有限公司成都分公司",11584664.2393,3588559.6862,"成都市高新区天府大道中段1268号天府软件园E区"],
    ["北京超图软件股份有限公司杭州分公司",13375617.5430,3538667.9064,"杭州市天目山路159号现代国际大厦A座"],
    ["北京超图软件股份有限公司西安分公司",12127616.0783,4064501.0071,"西安高新区丈八一路一号 汇鑫IBC（A座）"],
    ["北京超图软件股份有限公司长沙分公司",12573006.2587,3277897.5105,"长沙市芙蓉中路二段359号佳天国际新城北栋8H"],
    ["北京超图软件股份有限公司沈阳分公司",13740261.8165,5131821.5120,"沈阳市沈河区市府大路262甲号新华科技大厦"]
],
        url=host+"/iserver/services/map-china400/rest/maps/China";
function init(){
    //定义layer图层，TiledDynamicRESTLayer：分块动态 REST 图层
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" , useCanvas:false,useCORS:true});
    //为图层初始化完毕添加addLayer()事件
    layer.events.on({"layerInitialized":addLayer});
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.LayerSwitcher(),
        new SuperMap.Control.OverviewMap(),
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }})
    ]
    });
    markerLayer = new SuperMap.Layer.Markers("Markers");
}

function addLayer() {
    map.addLayers([layer,markerLayer]);
    map.setCenter(new SuperMap.LonLat(11733502.481499, 4614406.969325), 4);
}

//移除整个图层要素
function clearAllFeatures(){
    markerLayer.clearMarkers();
    if(map.popups.length != 0){
        var i = 0,lengthPopup = map.popups.length;
        while(i < lengthPopup){
            map.removePopup(map.popups[0]);
            i++;
        }
    }
}

//添加标注
function createMarker(){
    markerLayer.clearMarkers();
    for(var i = 0,lengthCompany = smCompanyArr.length;i < lengthCompany ;i++){
        var point = new SuperMap.Geometry.Point(parseFloat(smCompanyArr[i][1]),parseFloat(smCompanyArr[i][2])),
                strContent = new Array(smCompanyArr[i][0],smCompanyArr[i][3]),
                size = new SuperMap.Size(32, 32),
                offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                feature = new SuperMap.Feature(markerLayer, new SuperMap.LonLat(point.x, point.y));
        feature.data.icon = new SuperMap.Icon("images/markerflag.png", size, offset);
        var marker = feature.createMarker();
        var markerClick = function (evt,feature,strContent) {
            SuperMap.Event.stop(evt);
            this.win.open(feature,{
                "name":strContent[0],
                "informition":strContent[1]
            });
        };
        marker.events.register("click", feature, function(feature,strContent){
            return function(evt){
                markerClick(evt,feature,strContent);
            }
        }(feature,strContent));
        markerLayer.addMarker(marker);
    }
}

this.win = new InforWindow_z({"map":map});
function InforWindow_z(param){
    var t = this;
    t.infowin = null;
    t.map = null;
    t.init = function(param){
        for(var key in param){
            t[key] = param[key];
        }
    }
    t.open = function(feature,data){
        t.close();
        t.create(feature,data);
    }
    t.create = function(feature,data){
        var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>" +
                "<span style='font-weight: bold; font-size: 18px;'>详细信息</span><br>";
        contentHTML += "公司名称：" + data.name + "<br>";
        contentHTML += "公司地址："  + data.informition + "</div>";
        //初始化一个弹出窗口，当某个地图要素被选中时会弹出此窗口，用来显示选中地图要素的属性信息
        var popup = new SuperMap.Popup.FramedCloud("chicken",
                feature.marker.lonlat,
                null,
                contentHTML,
                null,
                true);
        feature.popup = popup;
        map.addPopup(popup);
        t.infowin = popup;
    }
    t.close = function(){
        if(t.infowin){
            try{
                t.infowin.hide();
                t.infowin.destroy();
            }
            catch(e){}
        }
    }
    t.init(param);
}

function mapToImg1(){
    MapToImg&&MapToImg.excute(map);
}

</script>
</head>
<body onload="init()">
<div id="toolbar">
    <input type="button" class="btn" value="标注" onclick="createMarker()" />
    <input type="button" class="btn" value="截图" onclick="mapToImg1()" />
    <input type="button" class="btn" value="清除" onclick="clearAllFeatures()" />
</div>
<div id="map"></div>
</body>
</html>
